<template>
  <view class="">
    <cu-custom bgColor="bg-gradual-green" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">添加动作</block>
    </cu-custom>

    <view style="margin-bottom: 105rpx;">
      <view style="display: flex;width: 100%;padding: 0 4%;justify-content: space-between;height: 100upx;line-height: 100upx;border-bottom: 1upx solid #F0F0F0;background-color: #fff;">
        <view class="">
          动作名称*
        </view>
        <view>
          <input style="height: 100upx;line-height: 100upx;text-align: right;" type="text" v-model="name" placeholder="请输入动作名称" />
        </view>
      </view>
      <!-- <view style="display: flex;width: 100%;padding: 0 4%;justify-content: space-between;height: 100upx;line-height: 100upx;border-bottom: 1upx solid #F0F0F0;background-color: #fff;">
        <view class="">
          复合动作*
        </view>
        <view>

        </view>
      </view> -->
      <!-- <view style="display: flex;width: 100%;padding: 0 4%;justify-content: space-between;height: 100upx;line-height: 100upx;">
        <view class="">
          动作参数
        </view>
      </view> -->
      <view style="display: flex;width: 100%;padding: 0 4%;justify-content: space-between;height: 100upx;line-height: 100upx;border-bottom: 1upx solid #F0F0F0;background-color: #fff;">
        <view class="">
          组数
        </view>
        <view>
          <input style="height: 100upx;line-height: 100upx;text-align: right;" type="number" maxlength="2" v-model="groupNum"
            placeholder="请输入动作组数" />
        </view>
      </view>
      <view style="display: flex;width: 100%;padding: 0 4%;justify-content: space-between;height: 100upx;line-height: 100upx;border-bottom: 1upx solid #F0F0F0;background-color: #fff;">
        <view class="">
          每组次数
        </view>
        <view>
          <input style="height: 100upx;line-height: 100upx;text-align: right;" type="number" maxlength="3" v-model="numOfGroup"
            placeholder="请输入每组次数" />
        </view>
      </view>
      <view style="display: flex;width: 100%;padding: 0 4%;justify-content: space-between;height: 100upx;line-height: 100upx;border-bottom: 1upx solid #F0F0F0;background-color: #fff;">
        <view class="">
          每组时间
        </view>
        <view>
          <input style="height: 100upx;line-height: 100upx;text-align: right;" type="number" maxlength="4" v-model="timeOfGroup"
            placeholder="请输入每组时间/秒" />
        </view>
      </view>
      <view class="u-f u-f-jsb" style="width: 100%;padding: 0 4%;border-bottom: 1upx solid #F0F0F0;background-color: #fff;">
        <view style="padding: 30rpx 0;width: 80rpx;">
          器械
        </view>

        <qiXie ref="qixie" :arrs="devicesIdArray" @emitIndex="emitIndex" />


        <view @click="$refs.qixie.toggle()" class="uni-list u-f-ac relative" style="width: 80%;min-height: 100rpx;">
          <text style="position: absolute;right: 0;">{{devicesIdArray[devicesIdArrayActive].name}}</text>
        </view>
      </view>
      <view style="display: flex;width: 100%;padding: 0 4%;justify-content: space-between;height: 100upx;line-height: 100upx;border-bottom: 1upx solid #F0F0F0;background-color: #fff;">
        <view class="">
          阻力
        </view>
        <view>
          <input style="height: 100upx;line-height: 100upx;text-align: right;" type="number" maxlength="4" v-model="obstruction"
            placeholder="请输入阻力/KG" />
        </view>
      </view>
      <view style="display: flex;width: 100%;padding: 0 4%;justify-content: space-between;height: 100upx;line-height: 100upx;border-bottom: 1upx solid #F0F0F0;background-color: #fff;">
        <view class="">
          组间休息
        </view>
        <view>
          <input style="height: 100upx;line-height: 100upx;text-align: right;" type="number" maxlength="4" v-model="restOfGroup"
            placeholder="请输入休息时间/秒" />
        </view>
      </view>
      <view style="display: flex;width: 100%;padding: 0 4%;justify-content: space-between;height: 100upx;line-height: 100upx;">
        <view class="">
          动作设置
        </view>
      </view>
      <view style="display: flex;width: 100%;padding: 0 4%;justify-content: space-between;height: 100upx;line-height: 100upx;border-bottom: 1upx solid #F0F0F0;background-color: #fff;">
        <view class="">
          部位
        </view>
        <view>
          <view class="uni-list">
            <view class="uni-list-cell">
              <view class="uni-list-cell-db">
                <picker @change="bindPickerChange($event, 1)" :value="index1" :range="array1" range-key="name">
                  <view>
                    <input style="height: 100upx;line-height: 100upx;text-align: right;" type="text" disabled :value="array1[index1].name"
                      placeholder="请选择 >" />
                  </view>
                </picker>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="u-f u-f-jsb" style="width: 100%;padding: 0 4%;border-bottom: 1upx solid #F0F0F0;background-color: #fff;">
        <view style="padding: 30rpx 0;width: 80rpx;">
          标签
        </view>
        <uni-popup id="popup" ref="popup" :type="type" :animation="true" @change="change">
          <view class="popup-content">
            <view>
              <view class="popup-title">可选标签</view>
              <view class="popup-lists u-f-ac">
                <view :class="item.isShow ? 'actives' : ''" class="popup-items u-f-ajc" v-for="(item, index) in array2"
                  :key="index" @click="activeItem(2, index)">{{item.name}}</view>
              </view>
            </view>
          </view>
        </uni-popup>
        <view @click="toggle('bottom', 'popup')" class="uni-list show-item u-f" style="width: 80%;min-height: 100rpx;">
          <text v-for="(item, index) in array2Active" :key="index" class="u-f-ajc">{{item}}、</text>
        </view>
      </view>
      <!-- <view style="display: flex;width: 100%;padding: 0 4%;justify-content: space-between;height: 100upx;line-height: 100upx;border-bottom: 1upx solid #F0F0F0;background-color: #fff;">
        <view class="">
          共享设置
        </view>
        <view>
          <view class="uni-list">
            <view class="uni-list-cell">
              <view class="uni-list-cell-db">
                <picker @change="bindPickerChange" :value="index" :range="array">
                  <view>
                    <input style="height: 100upx;line-height: 100upx;text-align: right;" type="text" disabled :value="array[index]"
                      placeholder="请选择 >" />
                  </view>
                </picker>
              </view>
            </view>
          </view>
        </view>
      </view> -->
      <view style="display: flex;width: 100%;padding: 0 4%;justify-content: space-between;height: 100upx;line-height: 100upx;">
        <view class="">
          动作详情
        </view>
      </view>
      <view style="display: flex;width: 100%;padding: 0 4%;justify-content: space-between;height: 100upx;line-height: 100upx;border-bottom: 1upx solid #F0F0F0;background-color: #fff;">
        <view class="">
          动作说明
        </view>
      </view>
      <textarea :focus="focusObj.focus7" class="uni-textarea text-areas" v-model="remark" placeholder="请输入动作说明" />
      <view style="display: flex;width: 100%;padding: 0 4%;justify-content: space-between;height: 100upx;line-height: 100upx;border-bottom: 1upx solid #F0F0F0;background-color: #fff;">
      	<view class="">
      		动作图片
      	</view>
      </view>
      <view style="text-align: center; width: 32%;background-color: #FFFFFF;" @click="chooseImage">
      	<image style="width: 100%;height: 200rpx;" :src="pirUrl||'../../static/paizhao.png'" mode=""></image>
      </view>
      <!-- <view style="display: flex;width: 100%;padding: 0 4%;justify-content: space-between;height: 100upx;line-height: 100upx;border-bottom: 1upx solid #F0F0F0;background-color: #fff;margin-bottom: 80upx;">
      	<view class="">
      		动作要领
      	</view>
      	<view @click="jump" :data-src='"/pagesA/Preparation_plan/Action_Essentials?id="+item.id'>
      			<input style="height: 100upx;line-height: 100upx;text-align: right;" disabled type="text" value="" placeholder="请选择 >"/>
      	</view>
      </view> -->
    </view>
		<view @click="submit" class="u-f-ajc" style="position: fixed;bottom: 0;z-index: 9; width: 100%;height: 100upx;background-color: #39BB9E;color: #fff;font-size: 32upx;">
			完成
		</view>
	</view>
</template>

<script>
  import uniPopup from "../../components/uni-popup/uni-popup.vue"
  import qiXie from "../../components/edit-popup/qixie.vue"
	export default {
    components: {
      uniPopup,
      qiXie,
    },
		data() {
			return {
        name: '', // 动作名字
        groupNum: 3, // 组数
        numOfGroup: 3, // 每组次数
				timeOfGroup: '', // 每组时间
        devicesIdArray: [], // 器械
        devicesIdArrayActive: -1, // 器械
        obstruction: '', // 阻力
        restOfGroup: '', //组间休息
        array1: [],
        index1: 0,
        array2: [],
        array2Active: [],
        remark: '',
        pirUrl: '',
        pirUrl1: '',
        type: 'bottom',
        focusObj: {
          focus1: false,
          focus2: false,
          focus3: false,
          focus4: false,
          focus5: false,
          focus6: false,
          focus7: false,
        },
        qx: 'no',
        id: '',
        planCourseId: '',
        index: '',
        experienceClass: '',
			}
		},
		onLoad(e) {
      console.log('添加动作的e', e)
      this.qx = e.qx;
      this.id = e.id;
      this.planCourseId = e.planCourseId;
      this.index = e.index;
      this.experienceClass = e.experienceClass;
      this.getDevicesId();
      this.getBody();
      this.getTag();
      
		},
		methods: {
      focusInput(index) {
        for (let f in this.focusObj) {
          this.focusObj[f] = false;
        }
        this.focusObj['focus'+index] = true;
      },
      confirm(index) {
        this.focusObj['focus'+index-1] = false;
        this.$nextTick(() => {
        	this.focusObj['focus'+index] = true;
        });
      },
      async getTag() {
        let {data: {datas}} = await this.$myRuquest({
          url: "/coach/training/getAllActionLabel",
          data: {
            bId: 1
          }
        })
       this.array2 = datas;
       this.array2.forEach((item) => item.isShow = false)
      },
      async getDevicesId() {
        let {data: {datas}} = await this.$myRuquest({
          url: "/coach/training/getInstrumentList",
          data: {
            bId: 1
          }
        })
       this.devicesIdArray = datas;
      },
      async getBody() {
        let {data: {datas}} = await this.$myRuquest({
          url: "/coach/training/getAllActionPart",
          data: {
            bId: 1
          }
        })
       this.array1 = datas;
      },
      
      bindMultiPickerColumnChange(e, index) {
        console.log(e)
      	console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value)
      	this['multiIndex'+ index][e.detail.column] = e.detail.value;
      	this.$forceUpdate();
      },
      bindPickerChange(e, index) {
      	console.log('picker发送选择改变，携带值为：' + e.detail.value)
      	this['index'+ index] = e.detail.value
      },
			menusClick(index){
				console.log(index)
				this.currentIndex = index
				this.income_type = this.currentIndex + 1
				this.setAjax()
			},
      toggle(type, name) {
        this.type = type
        this.$refs[name].open()
      },
      change(e) {
        console.log('popup ' + e.type + ' 状态', e.show)
      },
      activeItem(i, index) {
        let methodsES = (name, newArr) => {
          this[name][index].isShow = !this[name][index].isShow
          this[newArr] = this[name].filter(item => item.isShow).map(item => item.name)
        }
        if (i == 2) methodsES('array2', 'array2Active')
      },
      emitIndex(e) {
        console.log(e)
        this.devicesIdArrayActive = e
      },
      
      async submit() {
        let data = {
          "actionLabel": this.array2Active,
          "actionListShow": [
            "string"
          ],
          "actionPartNames": "string",
          "actionParts": this.array1[this.index1].id,
          "bId": 1,
          "devicesIdArray": this.devicesIdArrayActive>=0 ? [this.devicesIdArray[this.devicesIdArrayActive].name] : [],
          "gropNum": this.groupNum,
          "introduce": this.remark,
          "name": this.name,
          "numOfGroup": this.numOfGroup,
          "obstruction": this.obstruction,
          "picUrl": this.pirUrl1,
          "restOfGroup": this.restOfGroup,
          "timeOfGroup": this.timeOfGroup,
        }
        if (!data.name) {
          return uni.showToast({
            title: '请输入动作名称~',
            icon: 'none'
          });
        } else if (!data.gropNum) {
          return uni.showToast({
            title: '请输入组数~',
            icon: 'none'
          });
        }else if (!data.numOfGroup) {
          return uni.showToast({
            title: '请输入每组次数~',
            icon: 'none'
          });
        }
        uni.showLoading({
          title: "添加中..."
        });
        let res = await this.$myRuquest({
          url: '/coach/training/addAction',
          method: "POST",
          data,
          header:{
          	'Content-Type':'application/json',
          },
        })
        uni.hideLoading();
        uni.redirectTo({
          url: '../trial_class/movement_list?qx='+this.qx+'&id='+this.id+'&planCourseId='+this.planCourseId+'&index='+this.index+'&experienceClass='+this.experienceClass,
        });
      },
      chooseImage() {
      	var _this = this
      	uni.chooseImage({
      		count: 1, //默认9
      		sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
      		sourceType: ['album'], //从相册选择
      		success: function(res) {
      			let file = res.tempFilePaths
      			var images = []
      			var img = ''
      			console.log(res.tempFilePaths[0])
      			_this.pirUrl = res.tempFilePaths[0]
      			for (var i = 0; i < res.tempFilePaths.length; i++) {
      				uni.uploadFile({
      					url: 'https://jxjsservice.jxfit.cn/coach/baseService/uploadFile',
      					//仅为示例，非真实的接口地址
      					filePath: file[i],
      					name: 'file',
      					formData: {
      						'user': 'test'
      					},
      					success: (res) => {
      						console.log(res.data)
      						_this.pirUrl1 = JSON.parse(res.data).datas.face
      						// console.log(_this.imagess)
      						// _this.ticebaogao1 = _this.imagess[0]
      						// console.log(_this.avatar)
      						// img = img + JSON.parse(res.data).url + ';'
      						// _this.imgurl = img
      					}
      				});
      			}
      		}
      	});
      },
			jump(e){
				console.log(e.currentTarget.dataset.src)
				if ( e.currentTarget.dataset.src == 'Not-yet-open') {
					uni.showModal({
						title:'提示',
						content:'功能即将开放',
						showCancel: false,
						confirmColor:"#DD524D",
							success() {
								return
							}
					})
				} else {
					uni.navigateTo({
						url: e.currentTarget.dataset.src
					});
				}
			},
			
		}
	}
</script>

<style lang="scss" scoped>
  .text-areas {
    background-color: #ddd;
    width: 100%;
    padding: 4%;
    box-sizing: border-box;
  }
  .show-item {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .popup-content {
    width: 100%;
    background-color: #fff;
    padding: 0 20rpx 120rpx 30rpx;
  
    .popup-title {
      font-size: 30rpx;
      font-weight: 600;
      padding: 26rpx 0 30rpx;
    }
  
    .popup-lists {
      flex-wrap: wrap;
  
      >view:nth-of-type(4n) {
        margin-right: 0 !important;
      }
  
      .popup-items {
        background-color: #F0EEF1;
        width: 23%;
        margin-right: 2.66%;
        padding: 14rpx 0;
        font-size: 20rpx;
        color: #666;
        margin-bottom: 20rpx;
      }
    }
  }
</style>
